<template>
  <div class="mine">
    <router-link
      tag="div"
      to="/login"
      class="un_login"
      v-show="!user.isLogin"
      >
      <img src="@/assets/default_head.png" alt="" class="head">
      <h3>请登录</h3>
      <span>
        <img src="@/assets/right_arrow.png" alt="">
      </span>
    </router-link>
    <div class="login_success" v-show="user.isLogin">
      <img :src="user.head" alt="" class="head">
      <h3>{{ user.username }}</h3>
    </div>
    <div class="order">
      <h3>我的订单</h3>
      <img src="@/assets/right_arrow.png" alt="">
    </div>
    <div class="i">
      <div>
        <img src="@/assets/icon_paid.png" alt="">
        <span>待付款</span>
      </div>
      <div>
        <img src="@/assets/icon_receipt.png" alt="">
        <span>待收货</span>
      </div>
      <div>
        <img src="@/assets/icon-goods.png" alt="">
        <span>待评价</span>
      </div>
      <div>
        <img src="@/assets/icon_return_goods.png" alt="">
        <span>退款订单</span>
      </div>
    </div>
    <div class="list">
      <div>
        <img src="@/assets/icon_assets.png" alt="" class="icon">
        <h3>我的资产</h3>
      </div>
      <img src="@/assets/right_arrow.png" alt="" class="arrow">
    </div>
    <div class="list">
      <div>
        <img src="@/assets/pin_logo.jpg" alt="" class="icon">
        <h3>拼团订单</h3>
      </div>
      <img src="@/assets/right_arrow.png" alt="" class="arrow">
    </div>
    <div class="list">
      <div>
        <img src="@/assets/icon_collection.png" alt="" class="icon">
        <h3>我的收藏</h3>
      </div>
      <img src="@/assets/right_arrow.png" alt="" class="arrow">
    </div>
    <div class="list">
      <div>
        <img src="@/assets/icon_address.png" alt="" class="icon">
        <h3>地址管理</h3>
      </div>
      <img src="@/assets/right_arrow.png" alt="" class="arrow">
    </div>
    <div class="list">
      <div>
        <img src="@/assets/icon_message.png" alt="" class="icon">
        <h3>消息中心</h3>
      </div>
      <img src="@/assets/right_arrow.png" alt="" class="arrow">
    </div>
    <div class="list">
      <div>
        <img src="@/assets/icon_feedback.png" alt="" class="icon">
        <h3>帮助与反馈</h3>
      </div>
      <img src="@/assets/right_arrow.png" alt="" class="arrow">
    </div>
    <div class="login_out" v-show="user.isLogin">
      <button @click="out">退出</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'mint-ui'

export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['loginOut']),
    out () {
      this.$router.push('/mine')
      this.loginOut()
      Toast('注销成功')
    }
  }
}
</script>

<style lang="scss" scoped>
  .mine {
    .un_login {
      width: 100%;
      height: 100px;
      background: url(../assets/personal_bg.png) no-repeat center;
      background-size: 100% 100px;
      .head {
        display: block;
        float: left;
        width: 60px;
        height: 60px;
        margin-left: 25px;
        margin-top: 20px;
        border-radius: 50%;
      }
      h3 {
        float: left;
        line-height: 100px;
        padding-left: 15px;
        color: #fff;
        font-size: 14px;
      }
      span {
        display: block;
        float: right;
        width: 18px;
        height: 18px;
        margin-right: 25px;
        margin-top: 41px;
        img {
          width: 18px;
          height: 18px;
          display: block;
        }
      }
    }
    .login_success {
      width: 100%;
      height: 100px;
      background: url(../assets/personal_bg.png) no-repeat center;
      background-size: 100% 100px;
      .head {
        display: block;
        float: left;
        width: 60px;
        height: 60px;
        margin-left: 25px;
        margin-top: 20px;
        border-radius: 50%;
        border: none;
      }
      h3 {
        float: left;
        line-height: 100px;
        padding-left: 15px;
        color: #fff;
        font-size: 14px;
      }
      span {
        display: block;
        float: right;
        width: 18px;
        height: 18px;
        margin-right: 25px;
        margin-top: 41px;
        img {
          width: 18px;
          height: 18px;
          display: block;
        }
      }
    }
    .order {
      width: 100%;
      height: 40px;
      margin-top: 5px;
      padding: 0 10px 0 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      h3 {
        font-size: 14px;
        line-height: 40px;
        color: #333;
      }
      img {
        display: block;
        height: 15px;
        width: 15px;
      }
    }
    .i {
      display: flex;
      justify-content: space-around;
      height: 70px;
      width: 100%;
      border-bottom: 1px solid #eee;
      div {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        img {
          display: block;
          height: 23px;
          width: 23px;
        }
        span {
          color: rgba(0, 0, 0, 0.6);
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
    .list {
      height: 50px;
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 0 10px 0 15px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      div {
        display: flex;
        align-items: center;
        .icon {
          display: block;
          width: 38px;
          height: 38px;
        }
        h3 {
          color: rgb(51, 51, 51);
          font-size: 14px;
        }
      }
      .arrow {
        display: block;
        width: 15px;
        height: 15px;
      }
    }
    .login_out {
      width: 100%;
      height: 45px;
      padding-top: 25px;
      text-align: center;
      button {
        border: 1px solid #eee;
        border-radius: 5px;
        width: 50%;
        height: 45px;
        font-size: 14px;
        color: #666;
        background-color: #fff;
      }
    }
  }
</style>
